<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>诊断结果 - 萌迹(Cute Trail Admin)后台管理系统模板</title>
<link rel="icon" href="pet vet.ico" type="image/ico">
<meta name="keywords" content="CuteTrail,萌迹,后台模板,后台管理系统,萌迹HTML模板">
<meta name="description" content="CuteTrail是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid p-t-15">
  
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>诊断结果 - 宠物医院系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #f8f9fc;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --info-color: #3498db;
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fc;
            color: #333;
        }
        
        .diagnosis-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e3e6f0;
        }
        
        .page-header h1 {
            color: var(--primary-color);
            font-weight: 600;
            margin: 0;
			margin-top: -30px;
        }
        
        .action-buttons {
            display: flex;
            gap: 15px;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .search-filter-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }
        
        .search-box {
            flex: 1;
            min-width: 300px;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 10px 15px 10px 40px;
            border: 1px solid #d1d3e2;
            border-radius: 5px;
            background-color: white;
        }
        
        .search-icon {
            position: absolute;
            left: 15px;
            top: 12px;
            color: #b7b9cc;
        }
        
        .filter-dropdown {
            position: relative;
        }
        
        .filter-btn {
            background-color: white;
            border: 1px solid #d1d3e2;
            border-radius: 5px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #6e707e;
            cursor: pointer;
        }
        
        .diagnosis-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 20px;
        }
        
        .diagnosis-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .diagnosis-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1.5rem 0 rgba(58, 59, 69, 0.2);
        }
        
        .card-top {
            padding: 15px 20px;
            border-bottom: 1px solid #e3e6f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--secondary-color);
        }
        
        .diagnosis-id {
            font-weight: 600;
            color: var(--primary-color);
            font-size: 15px;
        }
        
        .diagnosis-date {
            color: #6e707e;
            font-size: 13px;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .pet-info-section {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .pet-avatar {
            width: 60px;
            height: 60px;
            background-color: #e6e8f0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 28px;
            flex-shrink: 0;
        }
        
        .pet-details {
            flex: 1;
        }
        
        .pet-name {
            font-weight: 600;
            font-size: 18px;
            margin: 0 0 5px 0;
            color: #2c3e50;
        }
        
        .pet-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 14px;
            color: #7f8c8d;
        }
        
        .diagnosis-details {
            margin: 20px 0;
        }
        
        .detail-section {
            margin-bottom: 15px;
        }
        
        .detail-title {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .detail-content {
            background-color: #f9f9f9;
            border-radius: 5px;
            padding: 12px;
            font-size: 14px;
            line-height: 1.5;
            white-space: pre-wrap;
        }
        
        .symptoms-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        
        .symptom-tag {
            background-color: #e8f4fc;
            color: var(--info-color);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 13px;
        }
        
        .treatment-plan {
            margin-top: 5px;
        }
        
        .medication-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .medication-name {
            font-weight: 500;
        }
        
        .medication-details {
            color: #6e707e;
            font-size: 14px;
        }
        
        .card-footer {
            padding: 15px 20px;
            background-color: var(--secondary-color);
            border-top: 1px solid #e3e6f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .diagnosis-status {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }
        
        .status-confirmed {
            background-color: #e8f8f0;
            color: var(--success-color);
        }
        
        .status-preliminary {
            background-color: #fef5e7;
            color: var(--warning-color);
        }
        
        .status-critical {
            background-color: #fdecea;
            color: var(--danger-color);
        }
        
        .action-btns {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            padding: 5px 12px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }
        
        .btn-outline {
            background-color: white;
            border-color: #d1d3e2;
            color: #6e707e;
        }
        
        .btn-solid {
            background-color: var(--primary-color);
            color: white;
        }
        
        .action-btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #7f8c8d;
            grid-column: 1 / -1;
        }
        
        .empty-state i {
            font-size: 50px;
            margin-bottom: 15px;
            color: #bdc3c7;
        }
        
        @media (max-width: 768px) {
            .diagnosis-cards {
                grid-template-columns: 1fr;
            }
            
            .search-filter-bar {
                flex-direction: column;
            }
            
            .search-box {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="diagnosis-container">
        <div class="page-header">
            <h1>诊断结果</h1>
            <div class="action-buttons">
                <button class="btn btn-primary" id="newDiagnosisBtn">
                    <i class="bi bi-plus-circle"></i> 新建诊断
                </button>
            </div>
        </div>
        
        <div class="search-filter-bar">
            <div class="search-box">
                <i class="bi bi-search search-icon"></i>
                <input type="text" placeholder="搜索宠物名称、主人或诊断编号..." id="searchInput">
            </div>
            <div class="filter-dropdown">
                <button class="filter-btn">
                    <i class="bi bi-funnel"></i>
                    <span>筛选</span>
                </button>
            </div>
        </div>
        
        <div class="diagnosis-cards">
            <!-- 诊断卡片1 -->
            <div class="diagnosis-card">
                <div class="card-top">
                    <span class="diagnosis-id">D-20231015-001</span>
                    <span class="diagnosis-date">2023-10-15</span>
                </div>
                <div class="card-body">
                    <div class="pet-info-section">
                        <div class="pet-avatar">🐶</div>
                        <div class="pet-details">
                            <h3 class="pet-name">豆豆 (泰迪犬)</h3>
                            <div class="pet-meta">
                                <span>主人: 王女士</span>
                                <span>年龄: 3岁</span>
                                <span>性别: 公</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="diagnosis-details">
                        <div class="detail-section">
                            <div class="detail-title">
                                <i class="bi bi-clipboard2-pulse"></i>
                                <span>临床症状</span>
                            </div>
                            <div class="detail-content">
                                主人主诉宠物近两天食欲不振，呕吐3次，最后一次呕吐物中带有黄色泡沫。体温38.9℃，轻微脱水。
                            </div>
                            <div class="symptoms-list">
                                <span class="symptom-tag">呕吐</span>
                                <span class="symptom-tag">食欲不振</span>
                                <span class="symptom-tag">脱水</span>
                            </div>
                        </div>
                        
                        <div class="detail-section">
                            <div class="detail-title">
                                <i class="bi bi-clipboard2-check"></i>
                                <span>诊断结果</span>
                            </div>
                            <div class="detail-content">
                                急性肠胃炎，可能因饮食不当引起。血常规显示白细胞轻度升高。
                            </div>
                        </div>
                        
                        <div class="detail-section">
                            <div class="detail-title">
                                <i class="bi bi-capsule"></i>
                                <span>治疗方案</span>
                            </div>
                            <div class="treatment-plan">
                                <div class="medication-item">
                                    <div>
                                        <div class="medication-name">宠物用阿莫西林</div>
                                        <div class="medication-details">50mg/片，每日2次，连用5天</div>
                                    </div>
                                    <div>1盒</div>
                                </div>
                                <div class="medication-item">
                                    <div>
                                        <div class="medication-name">益生菌粉剂</div>
                                        <div class="medication-details">每日1次，每次1包，连用7天</div>
                                    </div>
                                    <div>7包</div>
                                </div>
                                <div class="detail-content" style="margin-top: 10px;">
                                    建议禁食12小时，之后少量多餐喂食低脂处方粮。3天后复诊。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <span class="diagnosis-status status-confirmed">确诊</span>
                    <div class="action-btns">
                        <button class="action-btn btn-outline">
                            <i class="bi bi-printer"></i> 打印
                        </button>
                        <button class="action-btn btn-solid">
                            <i class="bi bi-pencil"></i> 编辑
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 诊断卡片2 -->
            <div class="diagnosis-card">
                <div class="card-top">
                    <span class="diagnosis-id">D-20231016-002</span>
                    <span class="diagnosis-date">2023-10-16</span>
                </div>
                <div class="card-body">
                    <div class="pet-info-section">
                        <div class="pet-avatar">🐱</div>
                        <div class="pet-details">
                            <h3 class="pet-name">球球 (布偶猫)</h3>
                            <div class="pet-meta">
                                <span>主人: 张先生</span>
                                <span>年龄: 2岁</span>
                                <span>性别: 母</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="diagnosis-details">
                        <div class="detail-section">
                            <div class="detail-title">
                                <i class="bi bi-clipboard2-pulse"></i>
                                <span>临床症状</span>
                            </div>
                            <div class="detail-content">
                                宠物频繁抓挠耳部，耳道内有黑褐色分泌物，有异味。耳镜检查发现耳螨感染。
                            </div>
                            <div class="symptoms-list">
                                <span class="symptom-tag">耳部瘙痒</span>
                                <span class="symptom-tag">耳分泌物</span>
                                <span class="symptom-tag">异味</span>
                            </div>
                        </div>
                        
                        <div class="detail-section">
                            <div class="detail-title">
                                <i class="bi bi-clipboard2-check"></i>
                                <span>诊断结果</span>
                            </div>
                            <div class="detail-content">
                                耳螨感染，继发轻度外耳炎。皮肤刮片检查未发现其他寄生虫。
                            </div>
                        </div>
                        
                        <div class="detail-section">
                            <div class="detail-title">
                                <i class="bi bi-capsule"></i>
                                <span>治疗方案</span>
                            </div>
                            <div class="treatment-plan">
                                <div class="medication-item">
                                    <div>
                                        <div class="medication-name">耳螨杀灭滴剂</div>
                                        <div class="medication-details">每周1次，连续3周</div>
                                    </div>
                                    <div>3支</div>
                                </div>
                                <div class="medication-item">
                                    <div>
                                        <div class="medication-name">耳道清洁液</div>
                                        <div class="medication-details">每日1次，清洁耳道</div>
                                    </div>
                                    <div>1瓶</div>
                                </div>
                                <div class="detail-content" style="margin-top: 10px;">
                                    建议家中其他宠物也进行检查，防止交叉感染。2周后复诊。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <span class="diagnosis-status status-confirmed">确诊</span>
                    <div class="action-btns">
                        <button class="action-btn btn-outline">
                            <i class="bi bi-printer"></i> 打印
                        </button>
                        <button class="action-btn btn-solid">
                            <i class="bi bi-pencil"></i> 编辑
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 诊断卡片3 -->
            <div class="diagnosis-card">
                <div class="card-top">
                    <span class="diagnosis-id">D-20231017-003</span>
                                    <span class="diagnosis-date">2023-10-17</span>
                </div>
                <div class="card-body">
                    <div class="pet-info-section">
                        <div class="pet-avatar">🐰</div>
                        <div class="pet-details">
                            <h3 class="pet-name">小白 (垂耳兔)</h3>
                            <div class="pet-meta">
                                <span>主人: 刘女士</span>
                                <span>年龄: 1岁</span>
                                <span>性别: 母</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="diagnosis-details">
                        <div class="detail-section">
                            <div class="detail-title">
                                <i class="bi bi-clipboard2-pulse"></i>
                                <span>临床症状</span>
                            </div>
                            <div class="detail-content">
                                宠物近一周食欲下降，粪便变小且量少，门齿过长影响进食。触诊腹部无明显异常。
                            </div>
                            <div class="symptoms-list">
                                <span class="symptom-tag">食欲下降</span>
                                <span class="symptom-tag">粪便异常</span>
                                <span class="symptom-tag">牙齿过长</span>
                            </div>
                        </div>
                        
                        <div class="detail-section">
                            <div class="detail-title">
                                <i class="bi bi-clipboard2-check"></i>
                                <span>诊断结果</span>
                            </div>
                            <div class="detail-content">
                                牙齿咬合不正导致门齿过长，影响正常进食。需进行牙齿修剪并观察后续进食情况。
                            </div>
                        </div>
                        
                        <div class="detail-section">
                            <div class="detail-title">
                                <i class="bi bi-capsule"></i>
                                <span>治疗方案</span>
                            </div>
                            <div class="treatment-plan">
                                <div class="medication-item">
                                    <div>
                                        <div class="medication-name">止痛药</div>
                                        <div class="medication-details">5mg/片，每日1次，连用3天</div>
                                    </div>
                                    <div>1盒</div>
                                </div>
                                <div class="medication-item">
                                    <div>
                                        <div class="medication-name">草粉</div>
                                        <div class="medication-details">每日3次，每次5g，用温水调成糊状</div>
                                    </div>
                                    <div>2包</div>
                                </div>
                                <div class="detail-content" style="margin-top: 10px;">
                                    已进行牙齿修剪。建议增加粗纤维食物，定期检查牙齿生长情况。1周后复诊。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <span class="diagnosis-status status-preliminary">初步诊断</span>
                    <div class="action-btns">
                        <button class="action-btn btn-outline">
                            <i class="bi bi-printer"></i> 打印
                        </button>
                        <button class="action-btn btn-solid">
                            <i class="bi bi-pencil"></i> 编辑
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    
    <!-- JavaScript 功能 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 新建诊断按钮
            document.getElementById('newDiagnosisBtn').addEventListener('click', function() {
                alert('跳转到新建诊断页面');
                // 实际项目中这里可以跳转到新建页面或打开模态框
            });
            
            // 打印按钮功能
            document.querySelectorAll('.btn-outline').forEach(btn => {
                btn.addEventListener('click', function() {
                    const diagnosisId = this.closest('.diagnosis-card').querySelector('.diagnosis-id').textContent;
                    alert(`正在打印诊断报告: ${diagnosisId}`);
                    // 实际项目中这里可以调用打印API
                });
            });
            
            // 编辑按钮功能
            document.querySelectorAll('.btn-solid').forEach(btn => {
                btn.addEventListener('click', function() {
                    const diagnosisId = this.closest('.diagnosis-card').querySelector('.diagnosis-id').textContent;
                    alert(`编辑诊断报告: ${diagnosisId}`);
                    // 实际项目中这里可以跳转到编辑页面
                });
            });
            
            // 搜索功能
            const searchInput = document.getElementById('searchInput');
            searchInput.addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    const searchTerm = this.value.toLowerCase();
                    filterDiagnoses(searchTerm);
                }
            });
            
            // 筛选功能
            function filterDiagnoses(searchTerm = '') {
                const cards = document.querySelectorAll('.diagnosis-card');
                let hasResults = false;
                
                cards.forEach(card => {
                    const petName = card.querySelector('.pet-name').textContent.toLowerCase();
                    const ownerName = card.querySelector('.pet-meta').textContent.toLowerCase();
                    const diagnosisId = card.querySelector('.diagnosis-id').textContent.toLowerCase();
                    
                    const matchesSearch = searchTerm === '' || 
                                        petName.includes(searchTerm) || 
                                        ownerName.includes(searchTerm) || 
                                        diagnosisId.includes(searchTerm);
                    
                    if (matchesSearch) {
                        card.style.display = 'block';
                        hasResults = true;
                    } else {
                        card.style.display = 'none';
                    }
                });
                
                // 可以在这里添加无结果时的提示
            }
        });
    </script>
</body>
</html>